<template>
	<view class="myMessagePage">
		<view class="avatarUrl">
			<text>头像:</text>
			<image :src="avatarUrl"></image>
		</view>
		<view class="nickName">
			<text>昵称:</text><input type="text" v-model="nickName" />
		</view>
		<view class="gender">
			<text>性别:</text><input type="text" v-model="isGender" />
		</view>

		<!-- 地址信息 -->
		<view class="address" @tap="openAddres2">
			<text>地址:</text><text>{{pickerText}}</text>
		</view>
		<simple-address ref="simpleAddress" btnFontSize="45rpx" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
		 themeColor="#007AFF" />
	</view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		onLoad() {
			this.getOpenerEventChannel().on('myMessage', res => {
				this.avatarUrl = res.userInfo.avatarUrl;
				this.nickName = res.userInfo.nickName;
				this.gender = res.userInfo.gender;
			});
		},
		components: {
			simpleAddress
		},
		computed: {
			isGender() {
				return this.gender == 1 ? "男" : "女";
			},
		},
		data() {
			return {
				avatarUrl: void 0,
				nickName: void 0,
				gender: void 0,
				// 地址部分内容
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '请选择地址',
				phone: void 0,
			};
		},
		methods: {
			openAddres2() {
				let index = this.$refs.simpleAddress.queryIndex(['浙江省', '杭州市', '江干区'], 'label');
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = e.labelArr.join(" ");
			}
		}
	}
</script>

<style lang="scss">
	.myMessagePage {
		padding-left: 40rpx;
		overflow: hidden;
	}

	.avatarUrl,
	.nickName,
	.gender,
	.address {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		>input {
			font-size: 35rpx;
		}

		>text {
			font-size: 35rpx;

			&:first-of-type {
				margin-right: 40rpx;
			}
		}
	}

	.avatarUrl {
		>image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.address {
		>text {
			&:last-of-type {
				flex: 1;
			}
		}
	}
</style>
